//搜索
<template>
    <div class="sdy-search">
        <sdyHeader title="啥都有" back>
            <template #left>
                <van-icon class="back-btn" name="arrow-left" />
            </template>
            <template #title>
                <van-search v-model="searchText" shape="round" background="#c72418" placeholder="请输入搜索关键字"></van-search>
            </template>
           <template #right>
            <van-button @click="searchHandler" size="small" type="success">搜索</van-button>
           </template>
        </sdyHeader>

        <!-- 搜索相关的内容显示 -->
        <!-- 有文本的时候显示列表 -->
        <!-- <sdySearchList v-if="searchText"></sdySearchList> -->
        <!-- 没文本的时候显示历史 -->
        <!-- <sdySearchHistory v-else></sdySearchHistory> -->

        <!-- 动态组件（component） -->
        <component :is="searchText ? sdySearchList : sdySearchHistory"></component>
    </div>
</template>

<script setup lang="ts">
// 引入组件
import { ref ,watch,provide} from 'vue'
import sdySearchHistory from './compontents/SdySearchHistory.vue'
import sdySearchList from './compontents/SdySearchList.vue'
import { useRouter} from 'vue-router';
import type { Router } from 'vue-router';
// 引入模糊搜索api请求接口
import { searchListApi } from '@/api/goods'
// 引入ts接口
import type{ MyHotItem } from '@/config/interface'
const $router: Router = useRouter()
// 准备一个数据和文本框交互
const searchText = ref<string>('')

// 搜索点击事件实现
const searchHandler = () => { 
    // console.log(searchText.value);
    // 定义text接收searchText.value,取消首尾空格
    const text= searchText.value.trim()
    // 非空验证
    if (!text) return

    // 跳转路由
    $router.push({ path: '/list', query: {search:text}})
}

//随着搜索输入，随时更新请求的数据
// 准备一个新数据表示搜索列表
const searchList = ref<MyHotItem[]>([])
//使用watch监听searchText
watch(searchText, async () => { 
    if (!searchText.value.trim()) return

    // console.log('请求数据');
    // searchListApi(searchText.value.trim())
    const res = await searchListApi(searchText.value.trim())
    // console.log(res);
    searchList.value = res.data
})
provide('searchList',searchList)
</script>

<style scoped lang="scss">
.back-btn{
    font-size: 24px;
    color: white;
}

</style>